.mchat {
  &__presets {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    flex-flow: row nowrap;
    line-height: 1.4em;
    user-select: none;

    span {
      flex: 1 1 auto;
      text-align: center;
      display: block;
      opacity: 0.8;
      border: $border;
      border-width: 1px 1px 0 0;
      font-size: 0.9em;
      text-transform: uppercase;
      cursor: pointer;

      @include transition;

      &.disabled {
        background: mix($c-accent, $c-bg-box, 15%);
        color: transparent;
        cursor: default;
      }

      &:not(.disabled):hover {
        background: $c-accent;
        color: $c-accent-over;
        opacity: 1;
      }
    }
  }
}
